import Vue from 'vue'
import Router from 'vue-router'
import RegRouter from '@/components/Engine/Base/RegRouter'

import Login from '@/components/Main/Platform/Login/Page'
import Home from '@/components/Main/Platform/Home/Page'
import Dashboard from '@/components/Main/Platform/Dashboard/Page'


import $ from "jquery";


/* 全局组件注册，但是比较麻烦，必须要提供install方法
具体参考：
https://www.jb51.net/article/116227.htm
https://www.cnblogs.com/SamWeb/p/6610733.html
*/
Vue.use(Router)
// Vue.use(oEngine)

const router = new Router({
//export default new Router({
  // 当用户点击 router-link 标签时，会去寻找它的 to 属性，
  // 它的 to 属性和 js 中配置的路径{ path: '/home', component: Home}  path 一一对应，从而找到了匹配的组件
  // 最后把组件渲染到 <router-view> 标签所在的地方。所有的这些实现才是基于hash 实现的。
  routes: [
    // 首页跳转登录页
    {
      path: '/',
      redirect: '/main/platform/login'
      // name: 'Home',
      // component: Home,
      // beforeEnter: (to, from, next) => {
      //   // ...
      // },
    },
    {
      path: '/main/platform/login',
      name: 'Login',
      component: Login
    },
    {
      path: '/main/platform/home',
      name: 'Home',
      component: Home
    },
    {
      path: '/main/platform/dashboard',
      name: 'Dashboard',
      component: Dashboard,
    },

    {
      path: '/engine/base/regrouter',
      name: 'RegRouter',// 注册动态路由
      component: RegRouter
    },

    // {
    //   path: '/Applet/Chargingpile/AppletJumpYJ',
    //   name: 'AppletJumpYJ',
    //   component: AppletJumpYJ
    // },
    // 我日你大爷，在IIS下，admin/index会导致重写冲突。。。fuck。。。
    // {
    //   path: '/admin/index',
    //   name: 'Index',
    //   component: Index
    // },


    // {
    //   path: '/APP/Main/Agreement/Page',
    //   name: 'Agreement',
    //   component: Agreement
    // },
    // {
    //   path: '/APP/Main/Privacy/Page',
    //   name: 'Privacy',
    //   component: Privacy
    // },
    // {
    //   path: '/APP/Main/Register/Page',
    //   name: 'Register',
    //   component: Register
    // },
    // {
    //   path: '/Applet/Chargingpile/Page',
    //   name: 'AppletJump',//注册动态路由
    //   component: AppletJump
    // },
    // {
    //   path: '/Applet/Chargingpile/AppletJumpYoupin',
    //   name: 'AppletJumpYoupin',//注册动态路由
    //   component: AppletJumpYoupin
    // },
    // {
    //   path: '/Applet/Chargingpile/Main/Page',
    //   name: 'AppletMain',
    //   component: AppletMain,
    // },
    // {
    //   path: '/Applet/Chargingpile/Mine/Page',
    //   name: 'AppletMine',
    //   component: AppletMine,
    // },
    // {
    //     path: '/helloword',
    //     name: 'helloword',
    //     component: HelloWorld,
    //     // 子路由设置，需要在这个组件中存在<router-view/>标记
    //     children: [{
    //         path: "HomeProduct",
    //         name: "HomeProduct",
    //         component: HomeProduct
    //     }]
    // },
    // {
    //     path: '/MT/:id',
    //     name: 'MarcoTest',//这个name是做动态路由时用的
    //     component: MarcoTest
    // },
  ],
// 采用历史模式，可去掉地址栏的【#】
  mode: 'history',
  //mode: 'hash'
  // 内置钩子
  // beforeRouteEnter(to, from, next) {
  //   console.log("========================")
  //   next(vm => {
  //     // 通过 `vm` 访问组件实例
  //     console.log(vm);
  //   })
  // }
});

// 此处的beforeEach事件注册优先于vue引用router，所以在这里注册的路由和上面添加的路由是同一批次。
// 这样的好处也就在于每个页面单独鉴权就可以，不用再像以前那样每个页面都加载全局的授权页面清单。
// Router文档：https://router.vuejs.org/zh/
router.beforeEach((to, from, next) => {
  let octopus = router.app.octopus;
  // console.log(to);
  console.log("Index.js路由：" + from.path + " ==> " + to.path + ", octopus.route: " + to.fullPath);

  // 如果当前页面不在整个路由中，则进入。
  if (to.matched.length === 0) {
    // console.log(octopus);
    // 如果是刷新进入，则借助RegRouter  中转页面注册。
    if (!octopus) {
      console.log("刷新页面进入，此时没有八抓鱼，所以需要跳转 RegRouter 进行引导注册。");
      next({
        // path: "/helloword",
        name: "RegRouter",
        query: {url: to.fullPath},
        // params: {data: to.fullPath},
      });
    }
    // 正常跳转将获得 octopus 对象，可以注册
    else {
      octopus.router.register(to.fullPath, function (data) {
        if (data.status.code == 200) {
          // octopus.tips.debug("八抓鱼已经得到，开始注册reg。");
          // 执行跳转
          next({
            // query: {id: 999}, // 追加参数，会体现在浏览器地址后面。
            path: to.fullPath,
          });
        } else {
          // 因为跳转都是固定的，不可能出现跳未注册页面的情况（除非黑客入侵），所以如果异常肯定是API或者网络问题。
          octopus.tips.error("网络出现问题，请重新尝试。");
          console.error(JSON.stringify(data.status));
        }
      });
    }
  }
  // 如果存在于路由，那简单了，直接进入。
  else {
    next();
  }



  // setTimeout(function () {
  // $("[o-container-app]").css("display", "block"); // 直接显示没有动画。
  // $("[o-container-app]").fadeIn(1000); // 隐藏到显示的动画
  // 自定义属性的动画，JQ还是很强悍的。

  //}, 200);

});

router.afterEach(() => {
  // 执行新页面的动画效果，页面默认不显示，然后出现动画，每次加载渲染都会在template引擎模块中设置为隐藏。
  Vue.nextTick(function () {
    $("[o-container-app]").animate({
      opacity: "1",
      // left: "100px",
      // width: "100px",
      // height: 300
    });
  })
})

// router.afterEach((to, from, next) => {
//
// });

export default router;

// IIS VUE配置刷新不会导致404教程，配置完还需要将本地的web.config文件删除。。。否则还是会报错。
// https://blog.csdn.net/yinjing8435/article/details/71274416

